<template>
  <view class="webview-container">
    <web-view :src="url"></web-view>
    <view class="close-btn" @click="closeWebview">×</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      url: ''
    }
  },
  onLoad(options) {
    this.url = decodeURIComponent(options.url)
  },
  methods: {
    closeWebview() {
      // #ifdef H5
      window.history.back();
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    }
  }
}
</script>
<style scoped>
.webview-container {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.close-btn {
  position: fixed;
  top: 98rpx;
  left: 32rpx;
  z-index: 9999;
  width: 44rpx;
  height: 44rpx;
  background: rgba(0,0,0,0.5);
  color: #000;
  font-size: 32rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.banner-swiper {
  width: calc(100% - 60rpx);
  max-width: 690rpx;
  height: 180rpx;
  border-radius: 20rpx;
  overflow: hidden;
  margin: 24rpx 30rpx 0 30rpx;
  display: block;
}
.banner-item {
  position: relative;
  width: 100%;
  height: 100%;
}
.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20rpx;
  display: block;
}
.banner-title {
  position: absolute;
  top: 16rpx;
  left: 24rpx;
  display: flex;
  align-items: center;
}
.banner-title-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #b08a1b;
}
.banner-tag {
  background: #e94d4d;
  color: #fff;
  font-size: 20rpx;
  border-radius: 8rpx;
  padding: 2rpx 10rpx;
  margin-left: 12rpx;
}
</style> 